<script setup lang="ts">
import TreeDirectoryItem from '@/views/tools/generate/TreeDirectory/TreeDirectoryItem.vue'
import {ref, watch} from "vue";

const props = defineProps({
  tree: {
    type: Array,
    default: () => []
  },
  active: {
    type: String
  }
})

const emit = defineEmits(['update:active'])

const innerActive = ref(null)

watch(() => props.active, (value) => {
  innerActive.value = value
}, { immediate: true })

watch(innerActive, (value) => {
  emit('update:active', value)
})
</script>

<template>
  <details class="eu-directory" open>
    <summary>
      <span class="tree-item">EuBackend</span>
    </summary>
    <tree-directory-item
      v-for="(item, index) in tree"
      :key="index"
      :item="item"
      v-model:active="innerActive"
    />
  </details>
</template>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
.eu-directory {
  width: 200px;
  overflow: auto;
  color: var(--theme-nav-first-color);
  font-size: 14px;
  user-select: none;
  @include scrollBarX;

  :deep(details) {
    padding-left: 10px;

    &[open]>summary {
      background-image: url("");
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: left center;

      &:only-child {
        background: unset;
      }

      &:not(:only-child) {
        &>.tree-item::before {
          background-image: url("");
        }
      }
    }
  }
  :deep(summary) {
    list-style: none;
    background-image: url("");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    //padding-left: 20px;

    line-height: 2em;
    border-radius: 4px;
    margin-bottom: 2px;

    &:only-child {
      background: unset;
      .tree-item {
        &::before {
          content: '';
          background-image: url('');
        }
        // 多图标
        &.folder_js::before {
          background-image: url('');
        }
        &.folder_java::before {
          background-image: url('');
        }
        &.folder_xml::before {
          background-image: url('');
        }
        &.folder_vue::before {
          background-image: url('');
        }
        &.folder_sql::before {
          background-image: url('');
        }
      }
    }

    &:hover {
      background-color: var(--theme-nav-first-hover-bg) !important;
      color: var(--theme-nav-first-hover-color);
    }

    &.active {
      background-color: var(--theme-nav-first-active-bg) !important;
      color: var(--theme-nav-first-active-color);
    }
  }
  :deep(.tree-item) {
    padding-left: 22px;
    white-space: nowrap;

    &::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url("");
      background-size: 1.2em;
      background-repeat: no-repeat;
      background-position: left center;
      vertical-align: middle;
    }
  }
}
</style>
